<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
        <title>印象外卖</title>
        <link rel="icon" href="./../images/favico.ico">
        <!--不同屏幕尺寸根字体设置-->
        <script src="./../js/base.js"></script>
        <!--element-ui的样式-->
        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
        <!--引入vant样式-->
        <link rel="stylesheet" href="../styles/vant.min.css"/>
        <!-- 引入样式  -->
        <link rel="stylesheet" href="../styles/index.css" />
        <!--本页面内容的样式-->
        <link rel="stylesheet" href="./../styles/address-edit.css" />
    </head>
    <body>
        <div id="address_edit" class="app">
            <div class="divHead">
                <div class="divTitle">
                    <i class="el-icon-arrow-left" @click="goBack"></i>{{title}}
                </div>
            </div>
            <div class="divContent">
<!--                <div class="divItem" style="height: 90px">-->
<!--                    <span style="width: 250rem">头像：</span>-->
<!--                    <img src="./../images/headPage.png" style="width: 70px ; height: 70px;border-radius: 50%;"/>-->
<!--&lt;!&ndash;                        <img src="imgPathConvert(this.form.image)" onclick="setImage" style="width: 70px ; height: 70px;border-radius: 50%;" />&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-image :src="imgPathConvert(this.form.image)" @click.stop.prevent="setImage(this.form.image)"  style="width: 60px ; height: 60px;border-radius: 50%" >&ndash;&gt;-->
<!--&lt;!&ndash;                        <div slot="error" class="image-slot">&ndash;&gt;-->
<!--&lt;!&ndash;                            <img src="./../images/headPage.png"/>&ndash;&gt;-->
<!--&lt;!&ndash;                        </div>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-image>&ndash;&gt;-->
<!--&lt;!&ndash;                    <input type="file" @change="selectImage" style="width: 15px; border-radius: 50%">&ndash;&gt;-->
<!--                </div>-->
                <div class="divItem">
                   <span>用户名：</span>
                   <el-input  v-model="form.name"  maxlength='10' class="inputUser"></el-input>
                   <span class="spanChecked" @click="form.sex = '1'">
                    <i :class="{iActive:form.sex === '1'}"></i>
                    先生
                   </span>
                   <span class="spanChecked" @click="form.sex = '0'">
                    <i :class="{iActive:form.sex === '0'}"></i>
                    女士
                </span>
                </div>
                <div class="divItem">
                    <span>手机号：</span>
                    <el-input  v-model="form.phone"  maxlength='11' style="width: calc(100% - 80rem);"></el-input>
                </div>
                <div class="divItem">
                    <span>密码：</span>
                    <el-input  v-model="form.password"  maxlength='20' style="width: calc(100% - 80rem);"></el-input>
                </div>
                <div class="divItem">
                    <span>身份证：</span>
                    <el-input  v-model="form.idNumber"  maxlength='18' style="width: calc(100% - 80rem);"></el-input>
                </div>
                <div class="divSave" @click="saveUser">保存</div>
            </div>
        </div>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="../../backend/plugins/vue/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../../backend/plugins/element-ui/index.js"></script>
        <!-- 引入vant样式 -->
        <script src="./../js/vant.min.js"></script>
        <script src="./../js/common.js"></script>
        <script src="./../api/userInfor.js"></script>
        <!-- 引入axios -->
        <script src="../../backend/plugins/axios/axios.min.js"></script>
        <script src="./../js/request.js"></script>
        <script>
            new Vue({
                el:"#address_edit",
                data(){
                    return {
                        title:'编辑用户信息',
                        form:{
                            name:'',//昵称
                            image:'',//头像
                            phone:'',//手机号
                            sex:'1',//0表示女 1 表示男
                            password:'',//密码
                            idNumber:'',//身份证
                        },
                        id:'',
                        activeIndex :0
                    }
                },
                computed:{},
                created(){
                    this.initData()
                },
                mounted(){
                },
                methods:{
                    goBack(){
                        history.go(-1)
                    },
                    async initData(){
                        const params = parseUrl(window.location.search)
                        this.id=params.id
                        if(params.id) {
                            const res = await userFindOneApi(this.id)
                            if (res.code === 1) {
                                this.form = res.data
                            } else {
                                this.$notify({type: 'warning', message: res.msg});
                            }
                        }
                    },
                    async saveUser(){
                        const form = this.form
                        const reg = /^1[3|4|5|7|8][0-9]{9}$/
                        const regexPwd = /^[A-Za-z0-9]{6,}$/;
                        if(!reg.test(form.phone)){
                            this.$notify({ type:'warning', message:'手机号码不合法'});
                            return
                        }else if(!regexPwd.test(form.password)){
                            this.$notify({ type:'warning', message:'密码不合法'});
                            return
                        }
                        let res= {}
                        if(this.id){
                            res = await updateUserApi(this.form)
                        }
                        if(res.code === 1){
                            window.requestAnimationFrame(()=>{
                                this.$notify({type:'success',message:'修改成功'});
                                // window.location.replace('/front/page/user.html')
                            })
                        }else{
                            this.$notify({ type:'warning', message:res.msg});
                        }
                    },
                    //网络图片路径转换
                    imgPathConvert(path){
                        return imgPath(path)
                    },
                    setImage(image){
                        return setImage(image)
                    },
                    selectImage(event) {      // 获取选中的文件
                        const file = event.target.files[0];
                        if (file) {        // 创建一个FileReader对象，用于读取文件内容
                            const reader = new FileReader();
                            reader.onload = (e) => {          // 更新image的值，使其指向选中的图片的URL
                                this.form.image = e.target.result;
                            };
                            reader.readAsDataURL(file); // 读取文件内容，并将其以DataURL的形式返回
                        }
                    }
                }
            })
            </script>
    </body>
</html>
